<template>
  <view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <view v-if="goodsList.length === 0" class="tis">购物车是空的哦~</view>
      <view v-for="(row, index) in goodsList" :key="index" class="row">
        <!-- 删除按钮 -->
        <view class="menu" @tap.stop="deleteGoods(row.id)">
          <view class="icon shanchu"></view>
        </view>
        <!-- 商品 -->
        <view
          :class="[theIndex === index ? 'open' : oldIndex === index ? 'close' : '']"
          class="carrier"
          @touchend="touchEnd(index, $event)"
          @touchmove="touchMove(index, $event)"
          @touchstart="touchStart(index, $event)"
        >
          <!-- checkbox -->
          <view class="checkbox-box" @tap="selected(index)">
            <view class="checkbox">
              <view :class="[row.selected ? 'on' : '']"></view>
            </view>
          </view>
          <!-- 商品信息 -->
          <view class="goods-info" @tap="toGoods(row)">
            <view class="img">
              <image :src="row.img"></image>
            </view>
            <view class="info">
              <view class="title">{{ row.name }}</view>
              <view class="spec">{{ row.spec }}</view>
              <view class="price-number">
                <view class="price">￥{{ row.price }}</view>
                <view class="number">
                  <view class="sub" @tap.stop="sub(index)">
                    <view class="icon jian"></view>
                  </view>
                  <view class="input" @tap.stop="discard">
                    <input v-model="row.number" type="number" @input="sum($event, index)" />
                  </view>
                  <view class="add" @tap.stop="add(index)">
                    <view class="icon jia"></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 脚部菜单 -->
    <view class="footer">
      <view class="checkbox-box" @tap="allSelect">
        <view class="checkbox">
          <view :class="{ on: isAllselected }"></view>
        </view>
        <view class="text">全选</view>
      </view>
      <view v-if="selectedList.length > 0" class="delBtn" @tap="deleteList">删除</view>
      <view class="settlement">
        <view class="sum">
          合计:
          <view class="money">￥{{ sumPrice }}</view>
        </view>
        <view class="btn" @tap="toConfirmation">结算({{ selectedList.length }})</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';

const sumPrice = ref('0.00');
const selectedList = ref([]);
const isAllselected = ref(false);
const initXY = ref([]);
const goodsList = ref([
  {
    id: 1,
    img: '/static/image/goods/p1.jpg',
    name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
    spec: '规格:S码',
    price: 127.5,
    number: 1,
    selected: false
  },
  {
    id: 2,
    img: '/static/image/goods/p2.jpg',
    name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
    spec: '规格:S码',
    price: 127.5,
    number: 1,
    selected: false
  },
  {
    id: 3,
    img: '/static/image/goods/p3.jpg',
    name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
    spec: '规格:S码',
    price: 127.5,
    number: 1,
    selected: false
  },
  {
    id: 4,
    img: '/static/image/goods/p4.jpg',
    name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
    spec: '规格:S码',
    price: 127.5,
    number: 1,
    selected: false
  },
  {
    id: 5,
    img: '/static/image/goods/p5.jpg',
    name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
    spec: '规格:S码',
    price: 127.5,
    number: 1,
    selected: false
  }
]);

// 控制滑动效果
const theIndex = ref(null);
const oldIndex = ref(null);
const isStop = ref(false);

// 下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
onPullDownRefresh(() => {
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 1000);
});

// 控制左滑删除效果-begin
const touchStart = (index, event) => {
  // 多点触控不触发
  if (event.touches.length > 1) {
    isStop.value = true;
    return;
  }
  oldIndex.value = theIndex.value;
  theIndex.value = null;
  // 初始坐标
  initXY.value = [event.touches[0].pageX, event.touches[0].pageY];
};

const touchMove = (index, event) => {
  // 多点触控不触发
  if (event.touches.length > 1) {
    isStop.value = true;
    return;
  }
  const moveX = event.touches[0].pageX - initXY.value[0];
  const moveY = event.touches[0].pageY - initXY.value[1];

  if (isStop.value || Math.abs(moveX) < 5) {
    return;
  }
  if (Math.abs(moveY) > Math.abs(moveX)) {
    // 竖向滑动-不触发左滑效果
    isStop.value = true;
    return;
  }

  if (moveX < 0) {
    theIndex.value = index;
    isStop.value = true;
  } else if (moveX > 0) {
    if (theIndex.value != null && oldIndex.value === theIndex.value) {
      oldIndex.value = index;
      theIndex.value = null;
      isStop.value = true;
      setTimeout(() => {
        oldIndex.value = null;
      }, 150);
    }
  }
};

const touchEnd = (index, $event) => {
  // 结束禁止触发效果
  isStop.value = false;
};

// 商品跳转
const toGoods = (e) => {
  uni.showToast({ title: '商品' + e.id, icon: 'none' });
  uni.navigateTo({
    url: '../../goods/goods'
  });
};

// 跳转确认订单页面
const toConfirmation = () => {
  const tmpList = [];
  const len = goodsList.value.length;
  for (let i = 0; i < len; i++) {
    if (goodsList.value[i].selected) {
      tmpList.push(goodsList.value[i]);
    }
  }
  if (tmpList.length < 1) {
    uni.showToast({
      title: '请选择商品结算',
      icon: 'none'
    });
    return;
  }
  uni.setStorage({
    key: 'buylist',
    data: tmpList,
    success: () => {
      uni.navigateTo({
        url: '../../order/confirmation'
      });
    }
  });
};

// 删除商品
const deleteGoods = (id) => {
  const len = goodsList.value.length;
  for (let i = 0; i < len; i++) {
    if (id === goodsList.value[i].id) {
      goodsList.value.splice(i, 1);
      break;
    }
  }
  selectedList.value.splice(selectedList.value.indexOf(id), 1);
  sum();
  oldIndex.value = null;
  theIndex.value = null;
};

// 删除商品s
const deleteList = () => {
  const len = selectedList.value.length;
  while (selectedList.value.length > 0) {
    deleteGoods(selectedList.value[0]);
  }
  selectedList.value = [];
  isAllselected.value = selectedList.value.length === goodsList.value.length && goodsList.value.length > 0;
  sum();
};

// 选中商品
const selected = (index) => {
  goodsList.value[index].selected = !goodsList.value[index].selected;
  const i = selectedList.value.indexOf(goodsList.value[index].id);
  i > -1 ? selectedList.value.splice(i, 1) : selectedList.value.push(goodsList.value[index].id);
  isAllselected.value = selectedList.value.length === goodsList.value.length;
  sum();
};

// 全选
const allSelect = () => {
  const len = goodsList.value.length;
  const arr = [];
  for (let i = 0; i < len; i++) {
    goodsList.value[i].selected = !isAllselected.value;
    arr.push(goodsList.value[i].id);
  }
  selectedList.value = isAllselected.value ? [] : arr;
  isAllselected.value = !(isAllselected.value || goodsList.value.length === 0);
  sum();
};

// 减少数量
const sub = (index) => {
  if (goodsList.value[index].number <= 1) {
    return;
  }
  goodsList.value[index].number--;
  sum();
};

// 增加数量
const add = (index) => {
  goodsList.value[index].number++;
  sum();
};

// 合计
const sum = (e, index) => {
  sumPrice.value = 0;
  const len = goodsList.value.length;
  for (let i = 0; i < len; i++) {
    if (goodsList.value[i].selected) {
      if (e && i === index) {
        sumPrice.value = sumPrice.value + e.detail.value * goodsList.value[i].price;
      } else {
        sumPrice.value = sumPrice.value + goodsList.value[i].number * goodsList.value[i].price;
      }
    }
  }
  sumPrice.value = sumPrice.value.toFixed(2);
};

const discard = () => {
  // 丢弃
};
</script>
<style lang="scss">
page {
  position: relative;
  background-color: #fff;
}

.checkbox-box {
  display: flex;
  align-items: center;

  .checkbox {
    width: 35upx;
    height: 35upx;
    border-radius: 100%;
    border: solid 2upx #f06c7a;
    display: flex;
    justify-content: center;
    align-items: center;

    .on {
      width: 25upx;
      height: 25upx;
      border-radius: 100%;
      background-color: #f06c7a;
    }
  }

  .text {
    font-size: 28upx;
    margin-left: 10upx;
  }
}

.status {
  width: 100%;
  height: 0;
  position: fixed;
  z-index: 10;
  background-color: #fff;
  top: 0;
  /*  #ifdef  APP-PLUS  */
  height: var(--status-bar-height); //覆盖样式
  /*  #endif  */
}

.header {
  width: 92%;
  padding: 0 4%;
  height: 100upx;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: #fff;
  /*  #ifdef  APP-PLUS  */
  top: var(--status-bar-height);
  /*  #endif  */
  .title {
    font-size: 36upx;
  }
}

.place {
  background-color: #ffffff;
  height: 100upx;
  /*  #ifdef  APP-PLUS  */
  margin-top: var(--status-bar-height);
  /*  #endif  */
}

.goods-list {
  width: 100%;
  padding: 20upx 0 120upx 0;

  .tis {
    width: 100%;
    height: 60upx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32upx;
  }

  .row {
    width: calc(92%);
    height: calc(22vw + 40upx);
    margin: 20upx auto;

    border-radius: 15upx;
    box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 4;
    border: 0;

    .menu {
      .icon {
        color: #fff;
        // font-size: 25upx;
      }

      position: absolute;
      width: 30%;
      height: 100%;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: red;
      color: #fff;
      z-index: 2;
    }

    .carrier {
      @keyframes showMenu {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-30%);
        }
      }
      @keyframes closeMenu {
        0% {
          transform: translateX(-30%);
        }
        100% {
          transform: translateX(0);
        }
      }

      &.open {
        animation: showMenu 0.25s linear both;
      }

      &.close {
        animation: closeMenu 0.15s linear both;
      }

      background-color: #fff;

      .checkbox-box {
        padding-left: 20upx;
        flex-shrink: 0;
        height: 22vw;
        margin-right: 20upx;
      }

      position: absolute;
      width: 100%;
      padding: 0 0;
      height: 100%;
      z-index: 3;
      display: flex;
      align-items: center;

      .goods-info {
        width: 100%;
        display: flex;
        padding-right: 20upx;

        .img {
          width: 22vw;
          height: 22vw;
          border-radius: 10upx;
          overflow: hidden;
          flex-shrink: 0;
          margin-right: 10upx;

          image {
            width: 22vw;
            height: 22vw;
          }
        }

        .info {
          width: 100%;
          height: 22vw;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          position: relative;

          .title {
            width: 100%;
            font-size: 28upx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            // text-align: justify;
            overflow: hidden;
          }

          .spec {
            font-size: 20upx;
            background-color: #f3f3f3;
            color: #a7a7a7;
            height: 30upx;
            display: flex;
            align-items: center;
            padding: 0 10upx;
            border-radius: 15upx;
            margin-bottom: 20vw;
          }

          .price-number {
            position: absolute;
            width: 100%;
            bottom: 0upx;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-size: 28upx;
            height: 60upx;

            .price {
            }

            .number {
              display: flex;
              justify-content: center;
              align-items: flex-end;

              .input {
                width: 60upx;
                height: 60upx;
                margin: 0 10upx;
                background-color: #f3f3f3;

                input {
                  width: 60upx;
                  height: 60upx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  text-align: center;
                  font-size: 26upx;
                }
              }

              .sub,
              .add {
                width: 45upx;
                height: 45upx;
                background-color: #f3f3f3;
                border-radius: 5upx;

                .icon {
                  font-size: 22upx;
                  width: 45upx;
                  height: 45upx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }
  }
}

.footer {
  width: 100%;
  padding: 0 4%;
  background-color: #fbfbfb;
  height: 100upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28upx;
  position: fixed;
  bottom: 0upx;
  z-index: 5;

  .delBtn {
    border: solid 1upx #f06c7a;
    color: #f06c7a;
    padding: 0 30upx;
    height: 50upx;
    border-radius: 30upx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .settlement {
    width: 60%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .sum {
      width: 50%;
      font-size: 28upx;
      margin-right: 10upx;
      display: flex;
      justify-content: flex-end;

      .money {
        font-weight: 600;
      }
    }

    .btn {
      padding: 0 30upx;
      height: 50upx;
      background-color: #f06c7a;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;

      border-radius: 30upx;
    }
  }
}
</style>
